<template>
  <div v-if="list.length > 0" class="charge-box">
    <div class="font-weight-700 font-size-15 group-box t-left padding-left-20 padding-top-bottom-15">{{ list[0].chargeItemAliasName }}</div>
    <ul class="group-box">
      <li class="t-center cursor-pointer one-line-ellipsis" :class="activeTab == item.chargeItemKey ? 'active' : ''" v-for="item in list[0].child" :key="item.chargeItemKey" @click="tabClick(item)">{{ item.chargeItemAliasName }}</li>
    </ul>
    <div class="font-weight-700 font-size-15 group-box t-left padding-left-20 padding-top-bottom-15">{{ list[1].chargeItemAliasName }}</div>
    <ul class="group-box">
      <li class="t-center cursor-pointer one-line-ellipsis" :class="activeTab == item.chargeItemKey ? 'active' : ''" v-for="item in list[1].child" :key="item.chargeItemKey" @click="tabClick(item)">{{ item.chargeItemAliasName }}</li>
    </ul>
  </div>
</template>
<script>
  import lodash from 'lodash';
  import { apiListGroupBizType } from '../../../api/businessManage';

  export default {
    props: {
      //是收入还是流出
      ctype: {
        type: String,
        default: '',
      },
      //是权责还是现金流
      chargeType: {
        type: String,
        default: '',
      },
    },

    data() {
      return {
        list: [],
        activeTab: '',
      };
    },
    methods: {
      async getInfo() {
        let relationAssetStatus = false;
        let res = await apiListGroupBizType({
          chargeBizTypeList: this.ctype == 'income' ? [1, 3] : [2, 4],
          likeAccountingType:this.chargeType
        });

        if (res.rows && res.rows.length > 0) {
          if (res.rows[0].child && res.rows[0].child.length > 0) {
            this.activeTab = res.rows[0].child[0].chargeItemKey;
            relationAssetStatus = res.rows[0].child[0].relationAssetStatus;
          } else if (res.rows[1].child && res.rows[1].child.length > 0) {
            this.activeTab = res.rows[0].child[1].chargeItemKey;
            relationAssetStatus = res.rows[0].child[1].relationAssetStatus;
          }
          this.$emit('tabCharge', this.activeTab, relationAssetStatus);
        }

        this.list = res.rows || [];
      },

      tabClick(item) {
        this.activeTab = item.chargeItemKey;
        this.$emit('tabCharge', item.chargeItemKey, item.relationAssetStatus);
      },
    },

    mounted() {
      this.getInfo();
    },
  };
</script>

<style lang="scss" scoped>
  .charge-box {
    // max-height: 600px;
    overflow-y: auto;
  }

  // .charge-box::-webkit-scrollbar {
  //   display: none;
  // }
  .group-box {
    width: 150px;
    li {
      line-height: 40px;
    }
    .active {
      color: #3384fe;
      background: rgba(51, 132, 254, 0.1);
      border-radius: 3px;
    }
  }
  ::v-deep .el-menu {
    border: none;
  }
</style>
